<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="${request.contextPath}/" />
    <meta name=”renderer” content=”webkit|ie-comp|ie-stand” />
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="favicon.ico">
    <!--<meta http-equiv="refresh" content="5;url=#">-->
    <title>农业金融数据统计分析</title>
    <link rel="stylesheet" href="Content/HomePage/css/index.css?a=1.0">
    <script src="Content/HomePage/js/jquery.min.js?a=1.0"></script>
    <script src="Content/HomePage/js/echarts.min.js?a=1.0"></script>
    <script src="Content/HomePage/js/heilongjiang.js?a=1.0"></script>
</head>
<body style="background: #031227">

<div class="content_all">
    <div class="content">

        <div class="content_left">
            <div class="jindu">
                <div class="title">服务占比</div>
                <div class="jindu_content">
                    <div id="main" style=" width: 95%;height: 95%;margin: 0 auto;" class="left_one_echarts">
                        <script type="text/javascript">
                            /*-----------------------------main-----------------------------*/
                            var myChart = echarts.init(document.getElementById('main'));
                            // 指定图表的配置项和数据
                            option = {
                                tooltip: {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                                    textStyle:{
                                        color:'#FFFFFF',
                                        fontSize:20
                                    }
                                },
                                legend: {
                                    orient: 'vertical',
                                    x: 'left',
                                    data:['社化服务占比4.8%','种子服务占比18.6%','农机服务占比32.3%','化肥服务占比44.3%','订单服务占比100%'],
                                    textStyle: {
                                        color: '#fft'
                                    }
                                },
                                series: [
                                    {
                                        name:'种子服务',
                                        type:'pie',
                                        radius: ['5%', '15%'],
                                        center:['60%','50%'], //设置饼的原心坐标 不设置就会默认在中心的位置
                                        avoidLabelOverlap: false,
                                        label: {
                                            normal: {
                                                show: false,
                                                position: 'center'
                                            },
                                            emphasis: {
                                                textStyle: {
                                                    fontSize: '30',
                                                    fontWeight: 'bold'
                                                }
                                            }
                                        },
                                        labelLine: {
                                            normal: {
                                                show: false
                                            }
                                        },
                                        data:[
                                            {value:81.4, name:' '
                                                ,itemStyle : {
                                                    color:['#0E3C64']
                                                }
                                            },
                                            {value:18.6, name:'种子服务占比18.6%'
                                                ,itemStyle : {
                                                    color:['#977CBB']
                                                }
                                            },
                                        ],
                                        color: ['#053E6D','yellow',]
                                    },
                                    {
                                        name:'社化服务',
                                        type:'pie',
                                        radius: ['25%', '35%'],
                                        center:['60%','50%'], //设置饼的原心坐标 不设置就会默认在中心的位置
                                        avoidLabelOverlap: false,
                                        label: {
                                            normal: {
                                                show: false,
                                                position: 'center'
                                            },
                                            emphasis: {
                                                textStyle: {
                                                    fontSize: '30',
                                                    fontWeight: 'bold'
                                                }
                                            }
                                        },
                                        labelLine: {
                                            normal: {
                                                show: false
                                            }
                                        },
                                        data:[
                                            {value:95.2, name:' ' ,itemStyle : {
                                                    color:['#0E3C64']
                                                }},
                                            {value:4.8, name:'社化服务占比4.8%' ,itemStyle : {
                                                    color:['#01C4C1']
                                                }},
                                        ],
                                        color: ['#01C4C1',]
                                    },
                                    {
                                        name:'化肥服务',
                                        type:'pie',
                                        radius: ['45%', '55%'],
                                        center:['60%','50%'], //设置饼的原心坐标 不设置就会默认在中心的位置
                                        avoidLabelOverlap: false,
                                        label: {
                                            normal: {
                                                show: false,
                                                position: 'center'
                                            },
                                            emphasis: {

                                                textStyle: {
                                                    fontSize: '30',
                                                    fontWeight: 'bold'
                                                }
                                            }
                                        },
                                        labelLine: {
                                            normal: {
                                                show: false
                                            }
                                        },
                                        data:[
                                            {value:55.7, name:' ' ,itemStyle : {
                                                    color:['#0E3C64']
                                                }},
                                            {value:44.3, name:'化肥服务占比44.3%' ,itemStyle : {
                                                    color:['#FFBB12']
                                                }},
                                        ],color: ['#FFBB12',]
                                    },
                                    {
                                        name:'农机服务',
                                        type:'pie',
                                        radius: ['65%', '75%'],
                                        center:['60%','50%'], //设置饼的原心坐标 不设置就会默认在中心的位置
                                        avoidLabelOverlap: false,
                                        label: {
                                            normal: {
                                                show: false,
                                                position: 'center'
                                            },
                                            emphasis: {

                                                textStyle: {
                                                    fontSize: '30',
                                                    fontWeight: 'bold'
                                                }
                                            }
                                        },
                                        labelLine: {
                                            normal: {
                                                show: false
                                            }
                                        },
                                        data:[
                                            {value:67.7, name:' ' ,itemStyle : {
                                                    color:['#0E3C64']
                                                }},
                                            {value:32.3, name:'农机服务占比32.3%' ,itemStyle : {
                                                    color:['#FE7E32']
                                                }},
                                        ],color: ['#FE7E32',]
                                    },
                                    {
                                        name:'订单服务',
                                        type:'pie',
                                        radius: ['85%', '95%'],
                                        center:['60%','50%'], //设置饼的原心坐标 不设置就会默认在中心的位置
                                        avoidLabelOverlap: false,
                                        label: {
                                            normal: {
                                                show: false,
                                                position: 'center'
                                            },
                                            emphasis: {

                                                textStyle: {
                                                    fontSize: '30',
                                                    fontWeight: 'bold'
                                                }
                                            }
                                        },
                                        labelLine: {
                                            normal: {
                                                show: false
                                            }
                                        },
                                        data:[
                                            {value:0, name:' ' ,itemStyle : {
                                                    color:['#0E3C64']
                                                }},
                                            {value:100, name:'订单服务占比100%' ,itemStyle : {
                                                    color:['#0477C3']
                                                }},
                                        ],color: ['#0477C3',]
                                    }
                                ]
                            };
                            myChart.setOption(option);
                        </script>

                    </div>

                </div>
            </div>
            <div class="hezuofang">
                <div class="title">服务面积</div>
                <div class="hezuo_content">
                    <div id="main22" style=" width: 100%;height: 95%;margin: 0 auto;" class="left_one_echarts">
                        <script type="text/javascript">
                            /*-----------------------------main-----------------------------*/
                            var myChart2 = echarts.init(document.getElementById('main22'));
                            // 指定图表的配置项和数据

                            option2 = {

                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data:['玉米','大豆','马铃薯','水稻'],
                                    textStyle: {
                                        color: '#fft'
                                    }
                                },
                                grid: {
                                    left: '1%',
                                    right: '10%',
                                    bottom: '3%',
                                    containLabel: true
                                },

                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: ['2015年度','2016年度','2017年度','2018年度'],
                                    axisLine:{
                                        lineStyle:{
                                            color:'#fff',
                                            width:1,//这里是为了突出显示加上的
                                        }
                                    }
                                },
                                yAxis: {
                                    type: 'value',
                                    axisLine:{
                                        lineStyle:{
                                            color:'#fff',
                                            width:1,//这里是为了突出显示加上的
                                        }
                                    }
                                },
                                series: [
                                    {
                                        name:'玉米',
                                        type:'line',
                                        data:[42576, 79719, 79198, 515203],
                                        // markPoint: {
                                        //     data: [
                                        //         {type: 'max', name: '最大值'},
                                        //         {type: 'min', name: '最小值'}
                                        //     ]
                                        // },
                                        // markLine: {
                                        //     data: [
                                        //         {type: 'average', name: '平均值'}
                                        //     ]
                                        // }
                                    },
                                    {
                                        name:'大豆',
                                        type:'line',
                                        data:[0, 0, 241416, 31655],
                                        // markPoint: {
                                        //     data: [
                                        //         {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                                        //     ]
                                        // },
                                        // markLine: {
                                        //     data: [
                                        //         {type: 'average', name: '平均值'},
                                        //         [{
                                        //             symbol: 'none',
                                        //             x: '90%',
                                        //             yAxis: 'max'
                                        //         }, {
                                        //             symbol: 'circle',
                                        //             label: {
                                        //                 normal: {
                                        //                     position: 'start',
                                        //                     formatter: '最大值'
                                        //                 }
                                        //             },
                                        //             type: 'max',
                                        //             name: '最高点'
                                        //         }]
                                        //     ]
                                        // }
                                    },
                                    {
                                        name:'马铃薯',
                                        type:'line',
                                        data:[0, 0, 50250, 25338],
                                        // markPoint: {
                                        //     data: [
                                        //         {type: 'max', name: '最大值'},
                                        //         {type: 'min', name: '最小值'}
                                        //     ]
                                        // },
                                        // markLine: {
                                        //     data: [
                                        //         {type: 'average', name: '平均值'}
                                        //     ]
                                        // }
                                    },
                                    {
                                        name:'水稻',
                                        type:'line',
                                        data:[69044, 75708, 48049, 70055],
                                        markPoint: {
                                            data: [
                                                {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                                            ]
                                        },
                                        // markLine: {
                                        //     data: [
                                        //         {type: 'average', name: '平均值'},
                                        //         [{
                                        //             symbol: 'none',
                                        //             x: '90%',
                                        //             yAxis: 'max'
                                        //         }, {
                                        //             symbol: 'circle',
                                        //             label: {
                                        //                 normal: {
                                        //                     position: 'start',
                                        //                     formatter: '最大值'
                                        //                 }
                                        //             },
                                        //             type: 'max',
                                        //             name: '最高点'
                                        //         }]
                                        //     ]
                                        // }
                                    }
                                ]
                            };

                            myChart2.setOption(option2);
                        </script>


                    </div>

                </div>
            </div>
        </div>

        <!--===========================================map============================================-->
        <div class="content_map">
            <div class="map_jrhzjg">
                <div class="map_jrhzjg_title">金融合作机构</div>
                <div class="map_jrhzjg_left">
                    <p class="map_jrhzjg_number">金融合作机构: <span>23</span>家</p>
                    <div class="map_jrhzjg_name"><div class="map_jrhzjg_name_color" style="background-color: #FFBB12"></div>合作银行</div>

                    <div class="map_jrhzjg_name"><div class="map_jrhzjg_name_color" style="background-color: #FE7E32"></div>金融企业</div>
                    <div class="map_jrhzjg_name"><div class="map_jrhzjg_name_color" style="background-color:#0EB9E5 "></div>担保公司</div>
                </div>
                <div id="main2" class="map_jrhzjg_right">
                    <script>

                        var myChart = echarts.init(document.getElementById('main2'));
                        // 指定图表的配置项和数据
                        var option = {
                            tooltip : { //提示框组件
                                trigger: 'item', //触发类型(饼状图片就是用这个)
                                formatter: "{a} <br/>{b} : {c} ({d}%)" //提示框浮层内容格式器
                            },
                            color:['#0EB9E5','#FFBB12','#FE7E32'],  //手动设置每个图例的颜色
                            // legend: {  //图例组件
                            //     //right:100,  //图例组件离右边的距离
                            //     orient : 'horizontal',  //布局  纵向布局 图例标记居文字的左边 vertical则反之
                            //     width:40,      //图行例组件的宽度,默认自适应
                            //     x : 'right',   //图例显示在右边
                            //     y: 'center',   //图例在垂直方向上面显示居中
                            //     itemWidth:10,  //图例标记的图形宽度
                            //     itemHeight:10, //图例标记的图形高度
                            //     data:['30%','10%','15%','20%','25%'],
                            //     textStyle:{    //图例文字的样式
                            //         color:'#333',  //文字颜色
                            //         fontSize:12    //文字大小
                            //     }
                            // },
                            series : [ //系列列表
                                {
                                    name:'随访次数',  //系列名称
                                    type:'pie',   //类型 pie表示饼图
                                    center:['50%','48%'], //设置饼的原心坐标 不设置就会默认在中心的位置
                                    radius : ['0%', '70%'],  //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                                    itemStyle : {  //图形样式
                                        normal : { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                                            label : {  //饼图图形上的文本标签
                                                show : true  //平常不显示
                                            },
                                            labelLine : {     //标签的视觉引导线样式
                                                show : true  //平常不显示
                                            }
                                        },
                                        emphasis : {   //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                                            label : {  //饼图图形上的文本标签
                                                show : true,
                                                position : 'center',
                                                textStyle : {
                                                    fontSize : '10',
                                                    fontWeight : 'bold'
                                                }
                                            }
                                        }
                                    },
                                    data:[
                                        {value:17.6, name:'担保公司'},
                                        {value:64.8, name:'合作银行'},
                                        {value:17.6, name:'金融企业'},



                                    ]

                                }
                            ]
                        }

                        myChart.setOption(option);
                    </script>
                </div>

            </div>
            <div class="map_xxhzwd">
                <div class="map_xxhzwd_title">线下合作网点</div>
                <div class="map_xxhzwd_number">合作网点: <span>1</span><span>7</span><span>8</span>个</div>
                <div class="map_xxhzwd_ECbox" id="main33">
                    <script>
                        var myChart = echarts.init(document.getElementById('main33'));

                        // 指定图表的配置项和数据
                        var option = {
                            tooltip: {},
                            grid:{
                                x: '15%',
                                x2:'15%',



                                y:'10%',
                                y2:'20%',

                            },


                            // legend: {
                            //     data:['销量'],
                            //     x: 'right', // 'center' | 'left' | {number},
                            //     y: 'top', // 'center' | 'bottom' | {number}
                            //     textStyle:{    //图例文字的样式
                            //         color:'white',  //文字颜色
                            //     },
                            //
                            //
                            // },



                            xAxis : [
                                {
                                    type : 'category',
                                    data : ['生资企业','合作（联）社','刷卡网点'],
                                    //设置轴线的属性
                                    axisLine:{
                                        lineStyle:{
                                            color:'#ffffff',
                                            width:1,//这里是为了突出显示加上的
                                        }
                                    }
                                }
                            ],





                            yAxis: {
                                axisLine:{
                                    lineStyle:{
                                        color:'#ffffff',
                                        width:1,   //这里是为了突出显示加上的
                                    },

                                }
                            },

                            series : [
                                {
                                    "name":"销量",
                                    "type":"bar",
                                    "data":[25, 138, 15],

                                    itemStyle:{
                                        normal:{
                                            color:'#4ad2ff'
                                        }
                                    },
                                },

                            ],
                            label : {
                                show : true,  //柱头数字
                                position : 'top',
                                textStyle : {
                                    fontSize : '10',
                                    fontFamily : '微软雅黑',
                                    fontWeight : 'bold',
                                    color:'white'
                                }
                            }
                        }

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    </script>
                </div>
            </div>
            <div class="map_fgqy">
                <div class="map_fgqy_title">覆盖区域</div>
                <p class="map_fgqy_text" style="margin-top: 70px">2017年，土地覆盖 <span style="color: #00ffea;">418,913</span> 亩</p>
                <div class="map_fgqy_jd" style="width: 27%;background-color: #01C4C1"></div>
                <p class="map_fgqy_text">2018年，土地覆盖 <span style="color: #4593f7">642251</span> 亩</p>
                <div class="map_fgqy_jd" style="width: 73%;background-color: #0477C3"></div>
            </div>

        </div>
        <!--right-->
        <div class="content_right">
            <div class="renshu">
                <div class="title">用户数</div>
                <img src="Content/HomePage/images/2465people.png" alt="">

                <!--<p>金融服务人数:</p>
                <div class="renshu_one">
                <
                <div class="number">0</div>
                <div class="number">0</div>
                <div class="number">2</div>
                <div class="biao">，</div>
                <div class="number">6</div>
                <div class="number">7</div>
                <div class="number">2</div>
                <div class="biao">人</div>
                </div>

                <p>平台服务人数:</p>
                <div class="renshu_two">

                <div class="number">0</div>
                <div class="number">0</div>
                <div class="number">4</div>
                <div class="biao">，</div>
                <div class="number">8</div>
                <div class="number">9</div>
                <div class="number">8</div>
                <div class="biao">人</div>
                </div>-->

            </div>
            <div class="edu">
                <div class="title">额度</div>
                <div id="main_echarts" class="edu_echarts">
                    <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('main_echarts'));

                        // 指定图表的配置项和数据
                        option = {
                            title : {
                                // text: '某地区蒸发量和降水量',
                                // subtext: '纯属虚构'
                            },
                            tooltip : {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['使用额度','授信额度'],
                                textStyle:{
                                    fontSize:15,
                                    color:'#fff'
                                }
                            },
                            toolbox: {
                                show : false,
                                feature : {
                                    dataView : {show: true, readOnly: false},
                                    magicType : {show: true, type: ['line', 'bar']},
                                    restore : {show: true},
                                    saveAsImage : {show: true}
                                }
                            },
                            calculable : false,
                            xAxis : [
                                {
                                    type : 'category',
                                    data : ['2015年度','2016年度','2017年度','2018年度'],
                                    axisLine: { lineStyle: { color: 'white' } },

                                    axisLabel: {
                                        show: true,
                                        textStyle: {
                                            color: '#fff'
                                        },


                                    }

                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value',

                                    axisLine: { lineStyle: { color: 'white' } },
                                    axisLabel: {
                                        show: true,
                                        textStyle: {
                                            color: '#fff'
                                        },
                                        formatter:'{value} 亿'
                                    }
                                }

                            ],
                            series : [
                                {
                                    name:'使用额度',
                                    type:'bar',
                                    data: [0.54,0.81,2,2.02],
                                    itemStyle:{
                                        normal:{
                                            color:'#FC9D36'
                                        }
                                    },


                                },
                                {
                                    name:'授信额度',
                                    type:'bar',
                                    data: [1,2,3,3],

                                    itemStyle:{
                                        normal:{
                                            color:'#0C96F1'
                                        }
                                    },



                                }
                            ]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    </script>
                </div>

            </div>
        </div>

    </div>


</div>

</body>
</html>

